<template>
  <div>
    <div class="search">
      <div class="input">事项编号：<el-input size="small" maxlength="12" v-model="postpage.number"></el-input></div>
      <div>
        问题类型：
        <el-cascader
          ref="downLoadLvlRef"
          v-model="value"
          :options="classification"
          :props="{
            expandTrigger: 'hover',
            label: 'text',
            value: 'value',
            children: 'children',
          }"
          @change="handleChange"
          size="small"
        ></el-cascader>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-select v-model="statusList" placeholder="请选择" size="small" @change="statusListchange">
        <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="form">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="color" label="时效" width="100" align="center">
          <template slot-scope="scope">
            <div class="Signal" :style="{ '--background-color': scope.row.color }"></div>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="事项编号" align="center"> </el-table-column>
        <el-table-column prop="subTypeName" label="问题类型" align="center" width="100"> </el-table-column>
        <el-table-column prop="createTime" label="上报时间" align="center"> </el-table-column>
        <el-table-column prop="location" label="事件地点" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="mdescribe" label="问题描述" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="status" label="事项状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">待受理</div>
            <div v-if="scope.row.status == 2">待办结</div>
            <div v-if="scope.row.status == 8">处理结果反馈</div>
            <div v-if="scope.row.status == 9">待退回</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.reportedNumber > 1"><el-tag>二次上报</el-tag></div>
            <div v-else-if="scope.row.rapidReportFlag == true"><el-tag type="warning">快速上报</el-tag></div>
            <div v-else-if="scope.row.rapidReportFlag != true && scope.row.reportedNumber == 1">
              <el-tag type="success">正常上报</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">办理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination layout="prev, pager, next" :total="total * 10" @current-change="changesize" class="page">
      </el-pagination>
    </div>
    <el-drawer title="事项详情" :visible.sync="drawer" :direction="direction" size="1000px">
      <!-- 待受理 -->
      <Acceptance
        @postmessage="getmessage"
        :childmessage="this.parentMessage"
        :win-state="drawer"
        v-if="status == 0"
      ></Acceptance>
      <!-- 待退回 -->
      <sendback
        @postmessage="getmessage"
        :childmessage="this.parentMessage"
        :win-state="drawer"
        v-if="status == 9"
      ></sendback>
      <feedback
        @postmessage="getmessage"
        :childmessage="this.parentMessage"
        :win-state="drawer"
        v-if="status == 8"
      ></feedback>
      <!-- 待办结状态1 -->
      <Conclude
        @postmessage="getmessage"
        :childmessage="this.parentMessage"
        :win-state="drawer"
        v-if="status == 20"
      ></Conclude>
      <!-- 待办结状态2 -->
      <Concludesecond
        @postmessage="getmessage"
        :childmessage="this.parentMessage"
        :win-state="drawer"
        v-if="status == 2"
      ></Concludesecond>
    </el-drawer>
  </div>
</template>

<script>
import Acceptance from './Acceptance/index.vue'
import sendback from './sendback/index.vue'
import feedback from './feedback/index.vue'
import Conclude from './Conclude/index.vue'
import Concludesecond from './Concludesecond/index.vue'
import Seats from '@/api/Seats'
import state from '@/mock/state.json'
import api from '@/api/api'
export default {
  data() {
    return {
      total: '',
      value: '',
      parentMessage: '',
      direction: 'rtl',
      drawer: false,
      status: '',
      currentPage: 10,
      statusList: '',
      classification: [],
      postpage: {
        dutyId: '',
        endTime: '',
        location: '',
        number: '',
        pageNo: 1,
        pageSize: 9,
        responsibilityId: '',
        seatId: '',
        startTime: '',
        statusList: [],
        typeId: '',
        subTypeId: '',
        typeId: '',
      },
      option: [],
      tableData: [],
    }
  },
  created() {
    this.option = state
    this.searchlist()
    this.getclassification()
  },
  mounted() {
    let currentTimer = setInterval(() => {
      api.agency(this.postpage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.totalPage
        }
      })
    }, 10000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  methods: {
    getclassification() {
      Seats.classification().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            let lItem = {
              text: item.typeName,
              value: item.id,
              children: [],
            }
            item.subTypeDTOS.forEach(items => {
              lItem.children.push({
                text: items.subTypeName,
                value: item.id + '-' + items.id,
              })
            })
            this.classification.push(lItem)
          })
        }
      })
    },
    statusListchange(val) {
      if (val == 0) {
        this.postpage.statusList = [0, 10]
      } else {
        this.postpage.statusList = [val]
      }
    },
    searchlist() {
      api.agency(this.postpage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.totalPage
        }
      })
    },
    handleChange() {
      let arr = this.value[1].split('-')
      this.postpage.subTypeId = arr[1]
    },
    handleClose(done) {
      if (this.event == 1) {
        this.$message({
          message: '操作成功！',
          type: 'success',
        })
        this.event = 0
        done()
        this.searchlist()
      }
    },
    Tip() {
      this.$message({
        message: '操作成功！',
        type: 'success',
      })
      this.total = 1
      this.postpage.pageNo = 1
      this.drawer = false
      this.searchlist()
    },
    getmessage(event) {
      this.event = event
    },
    changesize(row) {
      this.postpage.pageNo = row
      this.searchlist()
    },
    handleClick(scope) {
      switch (scope.status) {
        case 0:
          this.drawer = true
          this.status = scope.status
          this.parentMessage = scope
          break
        case 2:
          if (scope.responsibilityId == 0) {
            this.status = 20
            this.drawer = true
            this.parentMessage = scope
          } else {
            this.drawer = true
            this.status = scope.status
            this.parentMessage = scope
          }
          break
        case 8:
          this.drawer = true
          this.status = scope.status
          this.parentMessage = scope
          break
        case 9:
          this.drawer = true
          this.status = scope.status
          this.parentMessage = scope
          break
        default:
          break
      }
    },
    search() {
      api.agency(this.postpage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.totalPage
          if (res.data.records.length == 0 || res.data.records == []) {
            this.$message({
              message: '所查询数据无结果！',
              type: 'info',
            })
          }
        }
      })
    },
  },
  components: {
    Acceptance,
    sendback,
    feedback,
    Conclude,
    Concludesecond,
  },
}
</script>

<style lang="scss" scoped>
@import './management.scss';
</style>
